<template>
  <div class="main">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>

    <div class="sign-up-container">
      <el-form ref="userForm" :model="user">

        <el-form-item class="input-prepend restyle" prop="nickname" :rules="[{ required: true, message: '请输入你的昵称', trigger: 'blur' }]">
          <div>
            <el-input type="text" placeholder="昵称" v-model="user.nickname"/>
            <i class="iconfont icon-user"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="email" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' },{validator: checkEmail, trigger: 'blur'}]">
          <div>
            <el-input type="text" placeholder="邮箱" v-model="user.email"/>
            <i class="iconfont icon-phone"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="设置密码" v-model="user.password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="password" :rules="[{ required: true, message: '请输入确认密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="确认密码" v-model="password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
          <div>
            <el-input type="text" placeholder="验证码" v-model="user.code"/>
            <i class="iconfont icon-phone"/>
          </div>
          <div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;">
            <a href="javascript:" type="button" @click="getCode()" :value="codeTest" style="border: none;background-color: none">{{codeTest}}</a>
          </div>
        </el-form-item>

        <div class="btn">
          <input type="button" class="sign-up-button" value="注册" @click="submitRegister()">
        </div>
        <p class="sign-up-msg">
          点击 “注册” 即表示您同意并愿意遵守简书
          <br>
          <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
          和
          <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
        </p>
      </el-form>
      <!-- 更多注册方式 -->
      <div class="more-sign">
        <h6>社交帐号直接注册</h6>
        <ul>
          <li><a id="weixin" class="weixin" target="_blank" href="http://huaan.free.idcfengye.com/api/ucenter/wx/login"><i
            class="iconfont icon-weixin"/></a></li>
          <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

  import '~/assets/css/sign.css'
  import '~/assets/css/iconfont.css'
  import registerApi from '@/api/register'

  export default {

    layout: 'sign',
    data() {
      return {
        user: {
          "nickname": "",
          "email": "",
          "code": "",
          "password": ""
        },
        // 确认密码
        "password": "",
        "second": 60,
        "codeTest": "获取验证码",
        "disabled": false
      }
    },
    created() {

    },
    methods: {
      // 验证码定时器
      timeDown() {
        let result = setInterval(() => {
          --this.second;
          this.codeTest = this.second;
          if (this.second < 1) {
            clearInterval(result);
            this.sending = true;
            this.disabled = false;
            this.second = 60;
            this.codeTest = "获取验证码"
          }
        }, 1000);
      },
      // 获取验证码
      getCode() {
        // 校验email
        if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(this.user.email)) {
          this.$message.error('邮箱格式错误');
          return ;
        }
        if(this.disabled) {
          this.$message.error(`已经发送了邮箱验证码，请于${this.second}秒后再试`);
          return ;
        }
        // 禁用获取验证码按钮
        this.disabled=true;
        // 发送邮箱请求
        registerApi.sendEmail(this.user.email)
          .then(res => {
            if(res.data.code==200) {
              // 执行定时器方法
              this.$message({
                message: '已发送邮箱验证码，验证码有效期为5分钟',
                type: 'success'
              });
              this.timeDown();
            }else {
              this.$message.error(res.message);
            }
          });
      },
      // 邮箱校验
      checkEmail(rule, value, callback) {
        if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(this.user.email)) {
          return new callback(new Error("邮箱格式错误"));
        }
        return callback();
      },
      // 注册提交
      submitRegister() {
        // 校验参数
        if(!this.user.nickname) {
          this.$message.error('昵称不能为空');
          return ;
        }
        if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(this.user.email)) {
          this.$message.error('邮箱格式错误');
          return ;
        }
        if(this.user.code==null || this.user.code.length!=6) {
          this.$message.error('验证码输入错误');
          return ;
        }
        if(!this.user.password) {
          this.$message.error('密码不能为空');
          return ;
        }
        if(!this.password) {
          this.$message.error('确认密码不能为空');
          return ;
        }
        if(!(this.user.password===this.password)) {
          this.$message.error('两次输入密码不相同');
          return ;
        }
        // 发送注册请求
        registerApi.register(this.user)
          .then(res => {
            if(res.data.code==200) {
              // 提示成功
              this.$message({
                message: '注册成功，即将跳转至登录页面',
                type: 'success'
              });
              this.$router.push({"path":"/login"});
            }else {
              this.$message.error(res.message);
            }
          });
      }
    }

  }

</script>

<style>



</style>
